<script setup lang="ts">
import { Input } from "@/models/reactiveComponent";
import { computed, ref, watch, inject } from "vue";
import * as injectKeys from "@/services/injectKeys";

const props = defineProps<{ model: Input }>();
const model = props.model;

const dbServices = inject(injectKeys.dbKey)!;
const reactdataServices = inject(injectKeys.reactdataServicesKey)!;

const filterHandler = reactdataServices.getFilterHandler(model);

const appEventService = inject(injectKeys.appEventServiceKey)!;

appEventService.onResetFilters(() => {
  input.value = "";
});

const input = ref("");
watch(input, (value) => {
  if (value.length === 0) {
    filterHandler.removeFilter();
  } else {
    const expr = model.whereExpr.replaceAll("${}", value);
    filterHandler.addFilter(expr);
  }
});
</script>

<template>
  <div class="pybi-input">
    <el-input
      v-model="input"
      clearable
      :placeholder="`查询[${model.updateInfos[0].field}]`"
      v-bind="model.props"
    />
  </div>
</template>

<style scoped lang="less">
.pybi-input {
  width: 18em;
}
</style>
